<script setup>
import { computed, nextTick, ref, watch } from 'vue';
import defaultPhoto from '../../../assets/images/default_avatar.png'

defineOptions({
    name: 'fileupload'
})

const props = defineProps({
    action: {
        type: String,
        default: ''
    },
    businessId: {
        type: String,
        default: ''
    },
    type: {
        type: Boolean,
        default: false
    },
    accept: {
        type: String,
        default: ''
    },
    fileList: {
        type: Array,
        default: []
    },
})


let uploadFileList = ref([])    //上传的文件列表
// 当前渲染的文件列表
let currentFileList = computed(() => {
    if (props.fileList.length === 0) {
        console.log('success', uploadFileList.value);
        return uploadFileList.value
    } else {
        return props.fileList
    }
})


const beforeUpload = (file) => {
    console.log('before', file);
    file.loadFlag = 0
    uploadFileList.value.push(file)
    console.log(uploadFileList.value);

}

let percent = ref(0)   //当前上传百分比
let speed = ref(0)  //上传速度
let lastTime = ref('')//剩余时间
let lastLoaded = ref(0)    //上一秒已经上传的大小

watch(speed, () => {
    console.log('speed change');

})

const handleProgress = (e, file, files) => {
    // console.log(e);
    // console.log(file);
    // console.log(files);
    percent.value = e.percent.toFixed(2)

    speed.value = ((e.loaded - lastLoaded.value) / 1024).toFixed(1)
    lastLoaded.value = e.loaded


}

let imgurl = ref(defaultPhoto)
const handleSuccess = (file, files) => {

    console.log('handlesuccess', file);

    uploadFileList.value = uploadFileList.value.map(item => {
        item.loadFlag = 1
        return item
    })

    imgurl.value = file.imgurl


}

</script>

<template>
    <div class="fileupload">
        <div class="file-list">
            <div class="file-item" v-for="(item, index) in currentFileList" :key="index">
                <div class="item-img"><img :src="imgurl" alt=""></div>
                <div class="item-content">
                    <div class="content-name">filename{{ item.loadFlag }}</div>
                    <div class="content-process" v-if="item.loadFlag === 0">
                        <el-progress :percentage="percent" />
                    </div>
                    <div class="content-speed" v-if="item.loadFlag === 0">
                        <span>当前上传速度</span>
                        <span>{{ speed }}k/s</span>
                    </div>
                    <div class="content-time" v-if="item.loadFlag === 0">
                        <span>预计剩余上传时间</span>
                        <span>0s</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="file-btn" v-if="type">
            <el-upload class="avatar-uploader" :action="action" :show-file-list="false" :on-progress="handleProgress"
                :on-success="handleSuccess" :before-upload="beforeUpload">
                <el-button type="primary">Click to upload</el-button>
            </el-upload>
        </div>

    </div>
</template>

<style scoped lang='scss'>
.fileupload {
    margin-top: 10px;
    width: 200px;
    height: 100px;

    .file-list {
        width: 100%;
        margin-bottom: 10px;

        .file-item {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            background-color: rgb(240, 240, 240);
            border-radius: 10px;
            box-sizing: border-box;
            padding: 10px;

            .item-img {
                margin-right: 10px;
                width: 40px;
                height: 40px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>